<template>
  <SProp :label="label"
         :data="value"
         @update:data="onUpdateData">
  </SProp>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue';
import SProp from '@/ui-kit/prop/prop.vue';
import { sceneAssistant } from '../scene';
import propertyStore from './store';

export default defineComponent({
  name: 'prop',
  components: { SProp },
  props: {
    data: {
      default: () => {
        return {};
      },
      required: true,
      type: Object as PropType<sail.ComponentAttr>,
    },
  },
  setup(props, { emit }) {
    const label = ref(props.data.name);
    const value = ref(props.data.value);
    watch(() => props.data, (val) => {
      label.value = val.displayName || val.name;
      value.value = val.value;
    });
    return {
      label,
      value,
      onUpdateData(val: string | number) {
        const data: sail.ComponentAttr = props.data as sail.ComponentAttr;
        const bundle = propertyStore().bundle;
        sceneAssistant.setProperty(bundle, data.name, val);
      },
    };
  },
});

</script>

<style scoped lang="scss">
.prop {

}
</style>